import React, { Component } from 'react';
import styled from 'styled-components'
// import LazyLoad from "vanilla-lazyload";
const Container=styled.div`
background:#fff;
    ul{
        li{
            height:2.45rem;
            .pop_image{
                img{
                    height:1.875rem;
                }
            }
            .pop_information{
                display:flex;
                justify-content:space-between
                .left_info{
                    padding:.1rem
                    .pop_title{
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                    }
                    .time{
                        color: #999;
                        font-size: 12px;
                        line-height: 12px;
                        height: 12px;
                        margin-top:.08rem
                    }
                }
                .right_logo{
                        padding:.1rem
                        img{
                            height:.365rem
                        }
                    
                }
            }
        }
    }
`
class NameProduct extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    // componentDidMount(){
    //     setTimeout(() => {
    //         this.lazyLoadInstance = new LazyLoad({
    //             elements_selector: ".lazy"
    //             // ... more custom settings?
    //         });
    //         if (this.lazyLoadInstance) {
    //             this.lazyLoadInstance.update();
    //         }
    //     }, 0);

        
    // }
    render() {
        return (
            <Container className='lazy'>
                <ul>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp5.jmstatic.com//jmstore/image/000/005/5019_std/5d5f62dd66ad0_2048_1024.jpg?1566809306&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">伊莎凯瑟夏款出清</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/14835.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp6.jmstatic.com//jmstore/image/000/005/5454_std/5d5f65730f008_2048_1024.jpg?1566537941&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">乐卡克专场</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/16686.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp6.jmstatic.com//jmstore/image/000/001/1194_std/5d63726b2fbd0_2048_1024.jpg?1566798451&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">intercrew服饰特卖专场</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/3547.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp5.jmstatic.com//jmstore/image/000/006/6797_std/5d5f63c71474e_2048_1024.jpg?1566550585&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">伊微尔银饰特卖节</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/16646.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp5.jmstatic.com//jmstore/image/000/008/8179_std/5d5f8da6542ba_2048_1024.jpg?1566543312&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">滴露满59减10元</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/11432.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp6.jmstatic.com//jmstore/image/000/008/8484_std/5d5f623d1e388_2048_1024.jpg?1566553117&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">MLB&NEFF联合品牌专场</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/24200.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp5.jmstatic.com//jmstore/image/000/005/5427_std/5d5f8a0964e8c_2048_1024.jpg?1566791465&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">台湾artiart创意家居品牌团</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/15230.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp5.jmstatic.com//jmstore/image/000/005/5894_std/5d5f9052647ae_1024_512.jpg?1566551180&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">加班赶稿？零食续命！</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/15928.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className='pop_image'>
                            <img src='http://mp6.jmstatic.com//jmstore/image/000/007/7302_std/5d5f8461b661e_2048_1024.jpg?1566544071&imageView2/2/w/640/q/90'></img>
                        </div>
                        <div className='pop_information'>
                            <div className='left_info'>
                                <p className="pop_title">鸭鸭羽绒夏季大促</p>
                                <p className='time'>剩余 <span>01天</span><span>22时间</span></p>
                            </div>
                            <div className='right_logo'>
                                <img src='http://p0.jmstatic.com/brand/logo_180/19960.jpg' alt='显示不出来'></img>
                            </div>
                        </div>
                    </li>
                </ul>
            </Container>
        );
    }
}

export default NameProduct;